<script setup lang="ts">
import { useObsever } from '@/hooks'
import MyButton from './MyButton.vue'
import MyCount from './MyCount.vue'
import { ref } from 'vue'
import { message } from '@/components/XtxUI/Message'
// 🔔核心单词解释：
//   useIntersectionObserver   检查元素是否进入可视区函数
//   target                    目标元素，🎯需配合模板 ref 使用
//   isIntersecting            是否进入可视区(布尔值)
//   stop                      用于停止检测的函数

// 官网基本案例，供同学练习复制
// const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
//   // 写业务代码
// });

// 准备目标元素(DOM节点或组件，需配合模板 ref 使用)
useObsever(() => {})
let modelValue = ref(10)
const add = (n: number) => {
  modelValue.value = n
}
const isShow = ref(false)
const show = () => {
  message({ type: 'warn', text: '同意', time: 1000 })
}
</script>

<template>
  <div style="height: 2000px">
    <MyButton size="large" type="primary">测试按钮</MyButton>
    <MyButton>测试按钮</MyButton>
    <div>
      <!-- <MyCount :modelValue="modelValue" @update:num="add"></MyCount> -->
      <MyCount v-model="modelValue"></MyCount>
      <XtxCheckBox v-model="isShow" @change="show">是否同意条款项</XtxCheckBox>
    </div>
  </div>

  <!-- 🎯目标元素需添加模板 ref  -->
  <div ref="target">
    <h1>🎯我是目标元素🎯</h1>
  </div>
  <div style="height: 2000px"></div>
</template>
